<template>
  <div class="home">
    <div class="rt1">
      <img src="./images/all.png" />
    </div>
    <div id="line" ref="lineChart"></div>

    <div class="rt">
      <img src="./images/rt.png" />
    </div>
    <el-dialog v-model="dialogTableVisible" title="所属用户" width="1100">
      <el-table :data="foodmenu2">
        <el-table-column property="username" label="用户名称" width="150" />
        <el-table-column property="image" label="用户头像" width="180">
          <template v-slot="scope">
            <img :src="scope.row.image" min-width="70" height="70" />
          </template>
        </el-table-column>
        <el-table-column property="phone" label="联系方式" width="150" />
        <el-table-column property="gender" label="用户性别" width="150">
          <template v-slot="scope">
            {{ scope.row.gender === 0 ? '女' : '男' }}
          </template>
        </el-table-column>
        <el-table-column property="age" label="用户年龄" width="150" />
        <el-table-column property="money" label="用户余额" width="150" />
        <el-table-column property="vip" label="是否vip" width="150">
          <template v-slot="scope">
            {{ scope.row.vip === 0 ? '否' : '是' }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog v-model="dialogVisible" title="请做出选择" width="500">
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible1 = true">修改</el-button>
          <el-button type="primary" @click="dialogTableVisible = true"> 查看所属用户 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible1" title="修改信息" width="500">
      <el-form :model="formData" ref="form" label-width="100px">
        <el-form-item label="用户种类" prop="usertypeid">
          <el-input v-model="formData.usertypeid" disabled></el-input>
        </el-form-item>
        <el-form-item label="选择餐厅1">
          <el-select
            v-model="formData.first"
            placeholder="请选择第一家餐厅"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in restaurantForm"
              :key="item.restaurantname"
              :label="item.restaurantname"
              :value="item.restaurantid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择餐厅2">
          <el-select
            v-model="formData.second"
            placeholder="请选择第二家餐厅"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in restaurantForm"
              :key="item.restaurantname"
              :label="item.restaurantname"
              :value="item.restaurantid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择餐厅3">
          <el-select
            v-model="formData.third"
            placeholder="请选择第三家餐厅"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in restaurantForm"
              :key="item.restaurantname"
              :label="item.restaurantname"
              :value="item.restaurantid"
            />
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          style="margin-left: 50%"
          @click="
            changeinformation(formData.usertypeid, formData.first, formData.second, formData.third)
          "
          >修改
        </el-button>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, onMounted } from 'vue'

const router = useRouter()
const route = useRoute()
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  }
]
const dialogTableVisible = ref(false)
const dialogFormVisible1 = ref(false)
const formData = ref({
  usertypeid: '',
  first: '',
  second: '',
  third: ''
})
const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  }
]
const dialogVisible = ref(false)

type DateInfo = {
  usertypeid: string
  first: string
  second: string
  third: string
  res1: {
    restaurantid: string
    addressareaid: string
    restauranttypename: string
    restaurantname: string
    password: string
    image: string
    phone: string
    createtime: string
    updatetime: string
    introduction: string
    addressdetail: string
    surplus: number
    state: number
    qualification: string
    point: number
    sales: number
    inform: any
    date: any
  }
  res2: {
    restaurantid: string
    addressareaid: string
    restauranttypename: string
    restaurantname: string
    password: string
    image: string
    phone: string
    createtime: string
    updatetime: string
    introduction: string
    addressdetail: string
    surplus: number
    state: number
    qualification: string
    point: number
    sales: number
    inform: any
    date: any
  }
  res3: {
    restaurantid: string
    addressareaid: string
    restauranttypename: string
    restaurantname: string
    password: string
    image: string
    phone: string
    createtime: string
    updatetime: string
    introduction: string
    addressdetail: string
    surplus: number
    state: number
    qualification: string
    point: number
    sales: number
    inform: any
    date: any
  }
}
type allinformation1 = {
  //餐厅日销售
  userid: string
  usertypeid: string
  username: string
  password: string
  image: string
  phone: string
  createtime: string
  updatetime: string
  gender: string
  vip: string
  expiretime: string
  age: string
  state: string
  number: string
  money: string
}
const restaurantForm = ref([
  {
    addressareaid: '',
    addressdetail: '',
    createtime: '',
    image: '',
    introduction: '',
    password: '',
    phone: '',
    point: '',
    qualification: '',
    restaurantid: '',
    restaurantname: '',
    restauranttypename: '',
    state: '',
    surplus: '',
    updatetime: ''
  }
])
const getRestaurantsList = () => {
  axios({
    method: 'get',
    url: 'http://localhost:8080/manage/resgetall',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then(
    (res) => {
      console.log(res)
      restaurantForm.value = res.data.data
    },
    (err) => {
      console.log(err)
    }
  )
}
const foodmenu2 = ref([] as allinformation1[])
const dateinformation = ref([] as DateInfo[])
const fetchData = () => {
  //平台日销售
  axios({
    method: 'GET',
    url: 'http://localhost:8080/usertype/getall',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation.value = data.data
    console.log(dateinformation.value)
    drawCharts()
  })
}
const changeinformation = (val: string, val1: string, val2: string, val3: string) => {
  axios({
    method: 'post',
    data: {
      usertypeid: val,
      first: val1,
      second: val2,
      third: val3
    },
    url: 'http://localhost:8080/usertype/update',
    headers: {
      'Content-Type': 'application/json',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    ElMessage({
      message: '修改成功',
      type: 'success'
    })
    location.reload()
  })
}
onMounted(() => {
  getRestaurantsList()
  fetchData()
})
const drawCharts = () => {
  const lineChart = echarts.init(document.getElementById('line'))
  var getY = function (x) {
    let y = Math.sqrt((1 - Math.pow(x / 38, 2)) * Math.pow(30, 2))
    return y
  }
  var getOutY = function (x) {
    let y = Math.sqrt((1 - Math.pow(x / 50, 2)) * Math.pow(42, 2))
    return y
  }

  var items = [
    {
      symbol: '',
      name: '1',
      value: [6, getY(6)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '2',
      value: [18, getY(18)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '3',
      value: [30, getY(30)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '4',
      value: [42, getY(38)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '5',
      value: [30, -getY(30)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '6',
      value: [18, -getY(18)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '7',
      value: [6, -getY(6)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '8',
      value: [-6, -getY(6)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '9',
      value: [-18, -getY(18)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '10',
      value: [-30, -getY(30)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '11',
      value: [-42, -getY(38)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '12',
      value: [-30, getY(30)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '13',
      value: [-18, getY(18)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: '14',
      value: [-6, getY(6)],
      pointType: 'cloud'
    },
    {
      symbol: '',
      name: dateinformation.value[0].res1.restaurantname + '                      ',
      value: [2.5, getOutY(2.5)],
      pointType: 'point',
      belong: '1'
    },
    {
      symbol: '',
      name: dateinformation.value[0].res2.restaurantname + '                       ',
      value: [7.5, getOutY(7.5)],
      pointType: 'point',
      belong: '1'
    },
    {
      symbol: '',
      name: dateinformation.value[0].res3.restaurantname + '                         ',
      value: [12.5, getOutY(12.5)],
      pointType: 'point',
      belong: '1'
    },
    {
      symbol: '',
      name: dateinformation.value[1].res1.restaurantname + '                          ',
      value: [17.5, getOutY(17.5)],
      pointType: 'point',
      belong: '2'
    },
    {
      symbol: '',
      name: dateinformation.value[1].res2.restaurantname + '                           ',
      value: [22.5, getOutY(22.5)],
      pointType: 'point',
      belong: '2'
    },
    {
      symbol: '',
      name: dateinformation.value[1].res3.restaurantname + '                            ',
      value: [27.5, getOutY(27.5)],
      pointType: 'point',
      belong: '2'
    },
    {
      symbol: '',
      name: dateinformation.value[2].res1.restaurantname + ' ',
      value: [32.5, getOutY(32.5)],
      pointType: 'point',
      belong: '3'
    },
    {
      symbol: '',
      name: dateinformation.value[2].res2.restaurantname + '    ',
      value: [37.5, getOutY(37.5)],
      pointType: 'point',
      belong: '3'
    },
    {
      symbol: '',
      name: dateinformation.value[2].res3.restaurantname + '      ',
      value: [42.5, getOutY(42.5)],
      pointType: 'point',
      belong: '3'
    },
    {
      symbol: '',
      name: dateinformation.value[3].res1.restaurantname + '       ',
      value: [47.5, getOutY(47.5)],
      pointType: 'point',
      belong: '4'
    },
    {
      symbol: '',
      name: dateinformation.value[3].res2.restaurantname + '        ',
      value: [42, getOutY(48)],
      pointType: 'point',
      belong: '4'
    },
    {
      symbol: '',
      name: dateinformation.value[3].res3.restaurantname + '         ',
      value: [47.5, -getOutY(47.5)],
      pointType: 'point',
      belong: '4'
    },
    {
      symbol: '',
      name: dateinformation.value[4].res1.restaurantname + '          ',
      value: [32.5, -getOutY(32.5)],
      pointType: 'point',
      belong: '5'
    },
    {
      symbol: '',
      name: dateinformation.value[4].res2.restaurantname + '           ',
      value: [37.5, -getOutY(37.5)],
      pointType: 'point',
      belong: '5'
    },
    {
      symbol: '',
      name: dateinformation.value[4].res3.restaurantname + '            ',
      value: [42.5, -getOutY(42.5)],
      pointType: 'point',
      belong: '5'
    },
    {
      symbol: '',
      name: dateinformation.value[5].res1.restaurantname + '             ',
      value: [17.5, -getOutY(17.5)],
      pointType: 'point',
      belong: '6'
    },
    {
      symbol: '',
      name: dateinformation.value[5].res2.restaurantname + '              ',
      value: [22.5, -getOutY(22.5)],
      pointType: 'point',
      belong: '6'
    },
    {
      symbol: '',
      name: dateinformation.value[5].res3.restaurantname + '               ',
      value: [27.5, -getOutY(27.5)],
      pointType: 'point',
      belong: '6'
    },
    {
      symbol: '',
      name: dateinformation.value[6].res1.restaurantname + '                ',
      value: [2.5, -getOutY(2.5)],
      pointType: 'point',
      belong: '7'
    },
    {
      symbol: '',
      name: dateinformation.value[6].res2.restaurantname + '                 ',
      value: [7.5, -getOutY(7.5)],
      pointType: 'point',
      belong: '7'
    },
    {
      symbol: '',
      name: dateinformation.value[6].res3.restaurantname + '                  ',
      value: [12.5, -getOutY(12.5)],
      pointType: 'point',
      belong: '7'
    },
    {
      symbol: '',
      name: dateinformation.value[7].res1.restaurantname + '                   ',
      value: [-2.5, -getOutY(2.5)],
      pointType: 'point',
      belong: '8'
    },
    {
      symbol: '',
      name: dateinformation.value[7].res2.restaurantname + '                    ',
      value: [-7.5, -getOutY(7.5)],
      pointType: 'point',
      belong: '8'
    },
    {
      symbol: '',
      name: dateinformation.value[7].res3.restaurantname + '                     ',
      value: [-12.5, -getOutY(12.5)],
      pointType: 'point',
      belong: '8'
    },
    {
      symbol: '',
      name: ' ' + dateinformation.value[8].res1.restaurantname,
      value: [-17.5, -getOutY(17.5)],
      pointType: 'point',
      belong: '9'
    },
    {
      symbol: '',
      name: '  ' + dateinformation.value[8].res2.restaurantname,
      value: [-22.5, -getOutY(22.5)],
      pointType: 'point',
      belong: '9'
    },
    {
      symbol: '',
      name: '   ' + dateinformation.value[8].res3.restaurantname,
      value: [-27.5, -getOutY(27.5)],
      pointType: 'point',
      belong: '9'
    },
    {
      symbol: '',
      name: '    ' + dateinformation.value[9].res1.restaurantname,
      value: [-32.5, -getOutY(32.5)],
      pointType: 'point',
      belong: '10'
    },
    {
      symbol: '',
      name: '     ' + dateinformation.value[9].res2.restaurantname,
      value: [-37.5, -getOutY(37.5)],
      pointType: 'point',
      belong: '10'
    },
    {
      symbol: '',
      name: ' ' + dateinformation.value[9].res3.restaurantname + ' ',
      value: [-42.5, -getOutY(42.5)],
      pointType: 'point',
      belong: '10'
    },
    {
      symbol: '',
      name: '      ' + dateinformation.value[10].res1.restaurantname,
      value: [-47.5, getOutY(47.5)],
      pointType: 'point',
      belong: '11'
    },
    {
      symbol: '',
      name: '       ' + dateinformation.value[10].res2.restaurantname,
      value: [-42, getOutY(48)],
      pointType: 'point',
      belong: '11'
    },
    {
      symbol: '',
      name: '        ' + dateinformation.value[10].res3.restaurantname,
      value: [-47.5, -getOutY(47.5)],
      pointType: 'point',
      belong: '11'
    },
    {
      symbol: '',
      name: '         ' + dateinformation.value[11].res1.restaurantname,
      value: [-32.5, getOutY(32.5)],
      pointType: 'point',
      belong: '12'
    },
    {
      symbol: '',
      name: '          ' + dateinformation.value[11].res2.restaurantname,
      value: [-37.5, getOutY(37.5)],
      pointType: 'point',
      belong: '12'
    },
    {
      symbol: '',
      name: '           ' + dateinformation.value[11].res3.restaurantname,
      value: [-42.5, getOutY(42.5)],
      pointType: 'point',
      belong: '12'
    },
    {
      symbol: '',
      name: '            ' + dateinformation.value[12].res1.restaurantname,
      value: [-17.5, getOutY(17.5)],
      pointType: 'point',
      belong: '13'
    },
    {
      symbol: '',
      name: '             ' + dateinformation.value[12].res2.restaurantname,
      value: [-22.5, getOutY(22.5)],
      pointType: 'point',
      belong: '13'
    },
    {
      symbol: '',
      name: '              ' + dateinformation.value[12].res3.restaurantname,
      value: [-27.5, getOutY(27.5)],
      pointType: 'point',
      belong: '13'
    },
    {
      symbol: '',
      name: '               ' + dateinformation.value[13].res1.restaurantname,
      value: [-2.5, getOutY(2.5)],
      pointType: 'point',
      belong: '14'
    },
    {
      symbol: '',
      name: '                ' + dateinformation.value[13].res2.restaurantname,
      value: [-7.5, getOutY(7.5)],
      pointType: 'point',
      belong: '14'
    },
    {
      symbol: '',
      name: '                 ' + dateinformation.value[13].res3.restaurantname,
      value: [-12.5, getOutY(12.5)],
      pointType: 'point',
      belong: '14'
    }
  ]

  items.forEach((el, index) => {
    if (el.pointType == 'cloud') {
      ;(el.symbol =
        'image://'),
        (el.symbolSize = [56, 35])
      el.label = {
        normal: {
          show: true,
          position: 'bottom',
          borderWidth: 1,
          borderRadius: 12,
          padding: [4, 8, 4, 8],
          distance: 10,
          color: 'rgb(255,255,255)',
          borderColor: 'rgb(89,197,238)'
        }
      }
    } else if (el.pointType == 'point') {
      el.itemStyle = {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: '#0ceffd'
          },
          {
            offset: 1,
            color: '#0fffff'
          }
        ])
      }
      if (!el.label) {
        el.label = {
          show: true
        }
      }
      el.label.width = 200
      el.label.color = {
        lineColor: {
          color: 'rgb(24,163,239)'
        }
      }
      if (index < 38) {
        el.label.rotate = 57 - 3 * index
        el.label.align = 'left'
        if (!el.label.offset) {
          el.label.offset = [8, 0]
        }
        if (index < 20) {
          el.label.position = 'top'
        } else {
          el.label.position = 'bottom'
        }
      } else {
        el.label.rotate = -57 + 3 * (75 - index)
        el.label.align = 'right'
        if (!el.label.offset) {
          el.label.offset = [-8, 0]
        }
        if (index > 56) {
          el.label.position = 'top'
        } else {
          el.label.position = 'bottom'
        }
      }
    }
  })
  const dataArr = []
  const targetCoord = [0, 0]
  items.forEach((el) => {
    if (el.belong) {
      items.forEach((element) => {
        if (el.belong == element.name) {
          dataArr.push([
            {
              coord: element.value
            },
            {
              coord: el.value
            }
          ])
        }
      })
    } else if (el.pointType != 'none') {
      dataArr.push([
        {
          coord: targetCoord
        },
        {
          coord: el.value
        }
      ])
    }
  })
  lineChart.setOption({
    legend: [],
    xAxis: {
      show: false,
      type: 'value',
      max: 50,
      min: -51
    },
    yAxis: {
      show: false,
      type: 'value',
      max: 50,
      min: -50
    },
    series: [
      {
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        symbolSize: [15, 15],
        z: 3,
        circular: {
          rotateLabel: true
        },

        itemStyle: {
          normal: {
            shadowColor: 'none'
          }
        },
        data: items
      },
      {
        name: '',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        z: 1,
        effect: {
          show: true,
          smooth: false,
          trailLength: 0,
          symbol:
            'image://',
          symbolSize: [10, 30],
          period: 4,
          delay: 2
        },

        lineStyle: {
          width: 2,
          color: 'rgb(255,255,255)',
          curveness: 0
        },
        data: dataArr
      }
    ]
  })
  // 处理点击事件并且跳转到相应的百度搜索页面
  lineChart.on('click', function (params) {
    axios({
      method: 'POST',
      params: {
        usertypeid: params.name
      },
      url: 'http://localhost:8080/usertype/getuser',
      headers: {
        'Content-Type': 'application/octet-stream',
        Authorization: window.localStorage.getItem('RestaurantToken')
      }
    }).then((res) => {
      const { data } = res
      foodmenu2.value = data.data
      //console.log(foodmenu2.value);
      dialogVisible.value = true
      formData.value.usertypeid = params.name
      drawCharts()
    })
  })
  // 监听窗口大小变化，自适应图表
  window.addEventListener('resize', () => {
    lineChart.resize()
  })
}
</script>
<style scoped>
.home {
  display: flex;
  justify-content: center;
  /* 在水平方向上居中 */
  align-items: center;
  /* 在垂直方向上居中 */
  width: 100%;
  height: 888px;
  background: url(./images/qxbj.png) no-repeat;
  background-size: cover;
  position: relative;
}

.home img[src='./images/1.png'] {
  position: absolute;
  width: 100%;
}

.home .rt img {
  width: 200px;
  /* 设置图片的宽度 */
  height: auto;
  /* 让高度按比例自动调整 */
}

.rt {
  position: absolute;
  top: 32%;
  left: 44%;
}

.rt1 {
  position: absolute;
  top: 3%;
  right: 3%;
}

#line {
  width: 120%;
  height: 900px;
}
</style>
